<template>
	<div class='container'>
		<a href="https://aydk.site/" target="_blank">Monaco-editor 学习文档</a>
		<br>
		<br>
		<div>
			<button @click="setValue">改值</button>
			<button @click="insertValue">插值</button>
		</div>
		<h2>javascript</h2>
		<MonacoEditor :height="300" theme="vs" ref="monacoRef" v-model="jsCode"></MonacoEditor>
		<pre>{{ jsCode }}</pre>
		<h2>css</h2>
		<MonacoEditor :height="300" language="css" v-model="cssCode"></MonacoEditor>
		<pre>{{ cssCode }}</pre>
	</div>
</template>

<script setup>
import MonacoEditor from '@/components/MonacoEditor/index.vue'
import { ref } from 'vue'

const monacoRef = ref(null)
const jsCode = ref(`console.log('123')`)
const cssCode = ref(`.box{
    width:100px;
    height:200px;
}`)
const setValue = () => {
	monacoRef.value.setValue('let b=234;')
}
const insertValue = () => {
	monacoRef.value.insertValue('let a=123;')
}
</script>
<style lang='less' scoped>
.container {}
</style>
